<!--  -->
<template>
  <el-dialog
    v-model="thisVisible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="confirmButtonFlag" type="primary" @click="$emit('reset')">{{
          cancelButtonText
        }}</el-button>
        <el-button
          v-if="cancelButtonFlag"
          :disabled="loading"
          type="primary"
          @click="$emit('confirm')"
          >{{ confirmButtonText }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, computed } from 'vue'
// import { ElDialog, ElButton } from 'element-plus'

export default defineComponent({
  name: 'BasicDialog',
  components: {},
  props: {
    // 对话框是否可见
    visible: {
      type: Boolean,
      required: true
    },
    width: {
      type: String,
      default: '50%'
    },
    // 对话框的标题
    title: {
      type: String,
      default: '编辑'
    },
    // 在确认按钮中显示的文本
    confirmButtonText: {
      type: String,
      default: '确认'
    },
    // 在取消按钮中显示的文本
    cancelButtonText: {
      type: String,
      default: '获取'
    },
    confirmButtonFlag: {
      type: Boolean,
      default: true
    },
    cancelButtonFlag: {
      type: Boolean,
      default: true
    },
    dialogLoading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible', 'reset', 'confirm'],
  setup(props, { emit }) {
    const thisVisible = computed({
      get() {
        return props.visible
      },
      set(value) {
        emit('update:visible', value)
      }
    })
    const loading = computed({
      get() {
        return props.dialogLoading
      }
    })
    return {
      thisVisible,
      loading
    }
  }
})
</script>

<style lang="scss" scoped></style>
